/**
 * 费用的审批历史
 */
import React from 'react';
import moment from 'moment';
import Condition from 'components/condition';
import { Icon, Row, Col, Timeline } from 'antd';
import { messages, getApprovelHistory } from 'share/common';
import 'styles/expense/expense-approval-history.scss';
import approvalIcon from 'images/expense-detail/approval-history.svg'
import shallowEqual from '../component/shallowEqual';

const { If, Else, ElseIf } = Condition;

class ExpenseApproveHistory extends React.Component {


  static contextTypes = {
    currentExpense: React.PropTypes.object,
    currentExpenseType: React.PropTypes.object,
  };

  shouldComponentUpdate(nextProps, nextState, nextContext) {
    return !shallowEqual(this.props, nextProps) ||
      !shallowEqual(this.context, nextContext);
  }

  static renderText = {
    'expense.meituan.car': {
      companyName: messages('expense-1.key21')/*北京三快在线科技有限公司*/,
      option: messages('expense-1.key22')/*美团打车退款*/
    },
    'expense.type.didi': {
      companyName: messages('expense-1.key23')/*滴滴出行科技有限公司*/,
      option: messages('expense-1.key24')/*滴滴退款*/
    },
    'expense.meituan.car.surcharge': {
      companyName: messages('expense-1.key21')/*北京三快在线科技有限公司*/,
      option: messages('expense-1.key22')/*美团打车退款*/
    }
  };

  render() {
    let { currentExpense: { messageKey: expenseType }, currentExpense: { approvalOperates: approvalHistory = [] } } = this.context;
    !approvalHistory && (approvalHistory = []);
    return (
      <div className="expense-approve">
        <If value={approvalHistory.length > 0}>
          <div className="expense-approve-info">
            <img src={approvalIcon} alt={'approval'}/>
            <span className="expense-approve-text">{messages('expense-1.key25')/*审批历史*/}</span>
          </div>
        </If>
        <Timeline>
          {approvalHistory.map(item => {
            return (
              <Timeline.Item
                key={item.id}
                dot={<Icon type={getApprovelHistory(item.operate).icon} style={{ color: getApprovelHistory(item.operate).color }}/>}
              >
                <Row>
                  <Col span={5}>{moment(item.createdDate).format('YYYY-MM-DD HH:mm')}</Col>
                  <Col span={4} className="operation-type">
                    {Number(item.operate) === 33 && expenseType
                      ? ExpenseApproveHistory.renderText[expenseType].option
                      : getApprovelHistory(item.operate).text || '-'
                    }
                  </Col>
                  <Col span={5} className="operation-name">
                    <Condition>
                      <If value={Number(item.operate) === 33}> {expenseType && ExpenseApproveHistory.renderText[expenseType] ? ExpenseApproveHistory.renderText[expenseType].companyName : ''}</If>
                      <ElseIf value={+item.operate === 40}>
                        {messages('expense-1.key26')/*系统自动*/}
                      </ElseIf>
                      <Else>
                        {item.operator && (
                          <div>
                            {item.role ? `${item.role} ${<span className="ant-divider"/>} ` : ''}
                            {item.operator.fullName + ' ' + (item.operator.employeeID ? item.operator.employeeID : '')}
                          </div>
                        )}
                      </Else>
                    </Condition>
                  </Col>
                  <Col span={9} className="operation-remark">{item.operateDetail}</Col>
                </Row>
              </Timeline.Item>
            );
          })}
        </Timeline>
      </div>
    );
  }
}

ExpenseApproveHistory.propTypes = {
  approvalHistory: React.PropTypes.array,
  expenseType: React.PropTypes.object
};

export default ExpenseApproveHistory;
